<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>BFC是什么，怎么触发BFC，BFC渲染页面的规则</title>
  <style>
    * {
      margin: auto
    }

    #main {
      background-color: red;
      /* 问题的解决 */
      overflow: hidden;
      /* 父与子之间：子级的上下margin会与父级上下margin重叠 以最大值为标准去渲染 */
      margin-top: 5px;
    }

    #children {
      background-color: yellow;
      height: 100px;
      /* 边距重叠问题  父元素的红色不显示 */
      margin-top: 10px;
    }
  </style>
</head>

<body>
  <div id="main">
    <div id="children">
      <p>I am children</p>
    </div>
  </div>
</body>

</html>